<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-Control" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type=text/javascript src=https://www.5chelib.com/mobile/static/html2canvas.js> </script>
   <script type=text/javascript src=https://www.5chelib.com/mobile/static/canvas2image.js> </script> 
   
   <title>个人中心</title>
</head>
<style>
  [v-cloak] {
    display: none;
  }

</style>

<body>
  <div id="body" v-cloak>



        <div v-transfer-dom>
          <x-dialog hide-on-blur :show.sync="showQrcode" class="dialog-demo">
            <div class="img-box">
          

            </div>
            <div @click="showQrcode=false">
              <span class="vux-close"></span>
            </div>
          </x-dialog>
        </div>

    <!-- <myhead slot="header" title="" :showsearch=true style="position:fixed;width: 100%;z-index:1"></myhead> -->

    <transition name="slide-fade">
      <div v-if='!isShowInfo'>
        <div v-if='deposit<=0' style="text-align:center;background-color:#757575">
          <a style="color:white;" href="./buy_member.html">你尚未交纳押金,暂时无法借书</a>
        </div>
        <div class="person">
          <div>
            <div class="headerWapper">
              <img ref='avatar' @click='editHeader' accept="image/png,image/jpeg,image/jpg" :src="userInfo.avatar" alt=""
                @error='nofind($event)'>
              <input @change='upimage' ref="myinput" type="file">
            </div>
            <div>
              <p style="height:30px">{{userInfo.name}}
                <span v-if='isExpired=="0"' class="myicon">会</span>
                <span @click='show3=!show3' v-if='deposit>0' class="myicon">押</span>
                <!-- <span @click='shareQrcode'  class="myicon">分</span> -->
              </p>
              <p>过期时间:{{expired}}</p>
              <p>推广人数:{{userInfo.user_count}}</p>
            </div>

          </div>
          <div>
            <div @click="isShowInfo=!isShowInfo">
              <div class="right-arrow"></div>
            </div>
            <div>


              <a href="./message_list.html">
                <span>
                  <i class="iconfont icon-comment21"></i>
                  <badge v-if='lerrerNumber>0' :text="lerrerNumber"></badge>
                </span>
              </a>
              <span @click="shareQrcode" style="padding-left:10px;">
                <i class="iconfont icon-09"></i>
              </span>
            </div>
          </div>
        </div>







        <transition name="slide-fade">
          <group v-if='!isShowMoney' class="myGroup">
            <!-- <cell @click.native="changeshow1" title="我的钱包" :value="money">
          <i slot="icon" class="iconfont icon-qianbao"></i>
        </cell> -->

            <cell @click.native="showMoney" title="我的钱包" is-link>
              <i slot="icon" class="iconfont icon-qianbao"></i>
            </cell>

            <cell title="我的借阅" link="./had_to_borrow_books.html">
              <i slot="icon" class="iconfont icon-jieyueguanli"></i>
            </cell>

            <cell title="我的预借" link="./reservation_books.html">
              <i slot="icon" class="iconfont icon-yuding"></i>
            </cell>

            <cell title="我的收藏" link="./collection_books.html">
              <i slot="icon" class="iconfont icon-shoucang"></i>
            </cell>

            <cell title="我想求书" link="./member_seeking_books.html">
              <i slot="icon" class="iconfont icon-qiuyi"></i>
            </cell>

            <cell title="历史借书" link="./history_books.html">
              <i slot="icon" class="iconfont icon-lishiguiji"></i>
            </cell>

            <!-- <cell title="使用帮助" link="./help.html">
              <i slot="icon" class="iconfont icon-lishiguiji"></i>
            </cell> -->

            <!-- <cell v-if='deposit>0' @click.native="refund" style='height:31px;color:#d32f2f;text-align:center' title="退押金">

            </cell> -->

            <!-- <cell @click.native="shareQrcode" style='height:31px;color:#d32f2f;text-align:center' title="分享">

        </cell> -->

            <cell @click.native="changeShow" style='height:31px;color:#d32f2f;text-align:center' title="修改密码">

            </cell>

            <!-- <cell title="我的还书" link="./return_books.html">
        <i slot="icon" class="iconfont icon-lishiguiji"></i>
      </cell> -->

            <cell @click.native="logout" style='height:31px;color:#d32f2f;text-align:center' title="退出登录">

            </cell>

            <div v-transfer-dom>
              <confirm id='password' v-model="isshow" title="修改密码" @on-confirm="changePassword">
                <x-input v-model="code" placeholder="请输入验证码" title="">
                  <x-button slot="right" type="primary" mini @click.native="countDown">{{codeMessage}}</x-button>
                </x-input>
                <x-input style="margin-top:10px" title="" placeholder="请填写新密码" v-model="newPassword"></x-input>
              </confirm>
            </div>


            <div v-transfer-dom>
              <confirm id='password' v-model="isshow1" title="提现" @on-confirm="withdraw">
                <p>您的提现金额是{{money}}</p>
                <!-- <x-input @on-change='cashcheck' type='number' title="" placeholder="请输入提现金额" v-model="cash"></x-input> -->
              </confirm>
            </div>



          </group>
        </transition>

        <transition name="slide-fade">
          <div v-if='isShowMoney'>
            <group class="myGroup">
              <cell title="钱包" :value="money">
                <div style="white-space:nowrap" slot="default">
                  <span>{{money}}</span>
                  <x-button style="display:inline-block;width:70px;margin-top:0px;line-height:1.5" type="primary"
                    @click.native="withdraw">提现</x-button>
                </div>
              </cell>

              <cell title="押金" :value="deposit">
                <div style="white-space:nowrap" slot="default">
                  <span>{{deposit}}</span>
                  <x-button style="display:inline-block;width:80px;margin-top:0px;line-height:1.5" type="primary"
                    @click.native="show3=!show3">退押金</x-button>
                </div>
                <!-- <i slot="icon" class="iconfont icon-qianbao"></i> -->
              </cell>

              <cell>

              </cell>



              <div style="padding-left:10px;padding-right:10px">



                <x-button type="primary" @click.native="showMoney">返回</x-button>
              </div>

            </group>

          </div>
        </transition>




      </div>
    </transition>


    <transition name="slide-fade">
      <div v-if="isShowInfo">
        <div class="form">
          <group>



            <x-input :is-type="IDCardCheck" title='身份证' :disabled="!isEdit" v-model="IDCard" placeholder="请填写身份证号"></x-input>

            <x-input :disabled="!isEdit" title='用户名' v-model="name" :max='10' placeholder="用户名" required>

            </x-input>

            <datetime title='孩子出生年月日' :readonly="!isEdit" class="border-1px" v-model="birthDay" placeholder="孩子出生年月日"
              value-text-align="left">
              <!-- <span slot='title' class="require" >*</span> -->
            </datetime>




            <popup-picker title='孩子性别' :disabled="!isEdit" class="border-1px" :columns="1" show-name :data="genderList"
              v-model="childGender" placeholder="孩子性别" value-text-align="left">
              <!-- <span slot='title' class="require" >*</span> -->
            </popup-picker>

            <!-- <x-input v-model="childLike" class="border-1px" placeholder="阅读偏好">
                      <span class="require" slot="label">*</span>
                  </x-input> -->



            <x-address :disabled="!isEdit" title='地址' class="border-1px address" placeholder="地址" v-model="address"
              :list="addressData" value-text-align="left" @on-hide='getSites' @on-shadow-change="getName">
              <template slot="title" slot-scope="props">
                <!-- use scope="props" when vue < 2.5.0 -->

                </span>
              </template>
            </x-address>

            <x-input title='详细地址' :disabled="!isEdit" v-model="detailAddress" class="border-1px" placeholder="详细地址">
              <!-- <span class="require" slot="label">*</span> -->
            </x-input>
            <popup-picker title='站点' :disabled="!isEdit" v-show='!siteslist.length==0' class="border-1px" :columns="1"
              :data="siteslist" v-model="sites" show-name placeholder="选择站点" value-text-align="left">
            </popup-picker>


            <!-- <p class="detail">注册成功后可获得
                    <span class="strong">1</span>次免费借书机会，
                    <span class="strong">3本1个</span>星期。
                  </p> -->


            <div style="padding-left:10px;padding-right:10px">
              <x-button type="primary" v-if='isEdit==false' @click.native='isEdit=true'>修改</x-button>
              <x-button type="primary" v-if='isEdit==true' @click.native='save'>保存</x-button>
              <x-button type="primary" @click.native="isShowInfo=!isShowInfo">返回</x-button>
            </div>
          </group>
        </div>







      </div>
    </transition>

    <confirm id='refund' v-model="show3" title="退押金" @on-confirm="refund">
      <p style="text-align:center;">您确定要退押金吗？</p>
      <x-input v-model="wechatNumber" placeholder='请输入微信号'></x-input>
    </confirm>

    <div id="canvas" style="text-align: center;
    position: absolute;
    z-index: -1;
    top:0;
    width: 100%;">
    
      <h4>邀请朋友成为会员后可以获取10元奖励</h4>
      <qrcode :size='240' :value="qrcodeValue" style="max-width:100%" type="canvas"></qrcode>
      <p>长按二维码进行保存或分享给朋友</p>
    </div>









    <foot :index="4"></foot>


  </div>
</body>

</html>
